<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Refresh" @click="handleQuery">
          刷新
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="groupsList">
      <el-table-column label="小组名称" align="center" prop="groupName" />
      <el-table-column label="小组组长" align="center" prop="groupLeaderID"/>
      <el-table-column label="卓越班班级" align="center" prop="classID">
        <template #default="scope">
          <span>{{ getClassInfo(scope.row.classID) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最大成员数" align="center" prop="maxMembers" />
      <el-table-column label="创建时间" align="center" prop="createdDate" width="180">
        <template #default="scope">
          <span>{{ scope.row.createdDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Right" @click="handleView(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="Groups" lang="ts">
import {  MessageListGroups } from '@/apis/system/groups'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { listClassinfo } from '@/apis/system/classinfo'
import { GroupStore } from '@/stores/group'
import router from '@/router'

const groupStore = GroupStore()
const groupsList = ref([])
const loading = ref(true)
const total = ref(0)
const classinfoList = ref<any[]>([])
const ClassinfoqueryParams = ref({
  pageNum: 1,
  pageSize: 100000000
})
// 获取卓越班班级
listClassinfo(ClassinfoqueryParams.value).then(response => {
  if (response.data.code === 200) {
    classinfoList.value = response.data.data.records
    total.value = response.data.data.total
  } else {
    ElMessage({
      message: response.data.msg,
      type: 'error'
    })
  }
})

// 回显当前小组的班级
function getClassInfo(classID: number | string): string {
  const classInfo = classinfoList.value.find(item => item.id === classID)
  return classInfo ? classInfo.className : '未知班级'
}

/** 查询小组列表 */
function getList() {
  loading.value = true
  MessageListGroups().then(response => {
    if (response.data.code === 200) {
      groupsList.value = response.data.data
    } else {
      ElMessage({
        message: response.data.msg,
        type: 'error'
      })
    }
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  getList()
}

// 查看按钮操作
function handleView(row: any) {
  groupStore.groupInfo.groupID = row.groupID
  groupStore.groupInfo.OriginGroupPath = router.currentRoute.value.path
  groupStore.groupInfo.classID = row.classID
  groupStore.groupInfo.groupLeaderID = row.groupLeaderID
  router.push({ path: '/Group/GroupsMembers' })
}

getList()
</script>

<style scoped lang="scss">

</style>
